<template>
    <div class="index-container">
        <!-- 白色顶部导航栏 -->
        <TopNavCom id="top-nav-com" v-show="showTopNavCom" />
        <!-- 顶部导航栏 -->
        <IndexTopNav />
        <!-- 顶部轮播图 -->
        <IndexSwiper class="swiper-box" />
        <!-- 会员专区 -->
        <IndexVip />
        <!-- 直播课程 -->
        <LiveCourse />
        <!-- 免费课程 -->
        <CourseList :type="'free'" :pageNum="1" :pageSize="5"></CourseList>
        <!-- 精品课程 -->
        <CourseList :type="'boutique'" :pageNum="1" :pageSize="5"></CourseList>
        <!-- 优惠课程 -->
        <CourseList :type="'discount'" :pageNum="1" :pageSize="5"></CourseList>
        <!-- 头条精选 -->
        <HeadLine></HeadLine>
        <!-- 底部 -->
        <FooterCom></FooterCom>
        <AsideCom id="aside-com-box"></AsideCom>
    </div>
</template>

<script>
import IndexTopNav from './components/IndexTopNav.vue'
import TopNavCom from '@/components/TopNavCom.vue'
import IndexSwiper from './components/IndexSwiper.vue'
import IndexVip from './components/IndexVip.vue'
import LiveCourse from './components/LiveCourse.vue'
import CourseList from './components/CourseList.vue'
import HeadLine from './components/HeadLine.vue'
import FooterCom from '@/components/FooterCom.vue'
import AsideCom from '@/views/index/components/AsideCom.vue';
export default {
    data() {
        return {
            //控制首页顶部导航栏的显示
            showTopNavCom: false,
        }
    },
    components: {
        IndexTopNav,
        IndexSwiper,
        IndexVip,
        LiveCourse,
        CourseList,
        HeadLine,
        FooterCom,
        TopNavCom,
        AsideCom,
    },
    methods: {
        // 滚动事件处理函数
        handleScroll() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            this.showTopNavCom = scrollTop > 295;
        },



    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll);
    }
}
</script>

<style lang="less" scoped>
#aside-com-box {
    position: fixed;
    right: 20px;
    top: 25%;
}

#login-reg-com {
    position: fixed;
    left: 0;
    top: 0;
}

.index-container {
    background: #edf1f7;
    width: 100%;
    //height: 3000px;
}

.swiper-box {
    margin-top: -50px;
}

#classify-list {
    z-index: 99;
    background: #fff;
    opacity: 1;
    position: absolute;
    left: 285px;
    top: 270px;
}

#top-nav-com {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
}
</style>
